<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tam - Creative Portfolio Template</title>
    <meta name="description" content="Tam - Creative Portfolio Template"/>
    <meta name="keywords"
          content="blog, business card, creative, creative portfolio, cv theme, online resume, personal, portfolio, professional cv, responsive portfolio, resume, resume theme, vcard"/>
    <meta name="author" content="beingeorge"/>
    <meta name="theme-color" content="#2a2d35">

    <!-- Vendor Css-->
    <link rel="stylesheet" href="../static/css/vendor.css"/>
    <link rel="stylesheet" href="../static/css/LineIcons.min.css"/>

    <!-- TamTemplate style Css -->
    <link href="../static/css/tam.css" rel="stylesheet">

    <!-- Custom style Css -->
    <script type="text/javascript" src="../static/js/vue.min.js"></script>
    <script type="text/javascript" src="../static/js/jquery-3.4.1.min.js"></script>
</head>

<body data-spy="scroll" data-target=".navbar">

<!-- START: Preloader -->
<div id="preloader" class="preloader">
    <div class="spinner-grow text-dark" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>
<!-- END: Preloader -->


<!-- START: Aside -->
<aside class="aside">
    <!-- START: NAVBAR -->

    <div class="nav-wrapper">

        <div class="navbar-toggler">
            <svg class="ham hamRotate ham1" viewBox="0 0 100 100" width="60">
                <path class="line top"
                      d="m 30,33 h 40 c 0,0 9.044436,-0.654587 9.044436,-8.508902 0,-7.854315 -8.024349,-11.958003 -14.89975,-10.85914 -6.875401,1.098863 -13.637059,4.171617 -13.637059,16.368042 v 40"/>
                <path class="line middle" d="m 30,50 h 40"/>
                <path class="line bottom"
                      d="m 30,67 h 40 c 12.796276,0 15.357889,-11.717785 15.357889,-26.851538 0,-15.133752 -4.786586,-27.274118 -16.667516,-27.274118 -11.88093,0 -18.499247,6.994427 -18.435284,17.125656 l 0.252538,40"/>
            </svg>
        </div>

        <nav class="navbar text-center align-items-center justify-content-center">

            <div class="collapse navbar-collapse show" id="navbarCollapse">
                <div class="about-avatar mb-5">
                    <a href="/">
                        <img src="../static/images/about.jpg" alt=""
                             class="img-fluid mx-auto d-block shadow-sm rounded-full">
                    </a>
                    <div class="about-avatar-details mt-4">
                        <h1>Alice Joseph</h1>
                        <p class="badge">UI Designer</p>
                    </div>

                </div>
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/"><i class="lni-home"></i>Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/resume"><i class="lni-briefcase"></i>resume</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="/work"><i class="lni-graduation"></i>Portfolio</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/services"><i class="lni-offer"></i>Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/blog"><i class="lni-pencil"></i></i>Blog</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/contact"><i class="lni-phone-handset"></i>联系我们</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <!-- END: NAVBAR -->
</aside>
<!-- START: Aside -->

<div class="page-overlay">
    <span class="overlay-1"></span>
    <span class="overlay-2"></span>
</div>

<div class="page-wrapper">
    <section class="section section-light">
        <div class="container">
            <div class="row">
                <div class="col-6 col-md-4">
                    <div class="section-head">
                        <span>产 品 列 表</span>
                        <h2>Portfolio</h2>
                    </div>
                </div>
            </div>
            <ul class="list-items-container row">
                {% for item in data %}
                <li class="col-6 col-md-4 list-item" data-groups="all slideshow">
                    <figure>
                        <img src="{{ item.Phref }}" alt="p6">
                        <figcaption>
                            <div class="caption-inner">
                                <a href="/details_ids/{{ item.id }}" name="{{ item.id }}"><h3
                                        class="portfolio-item-title">{{ item.Pname }}</h3></a>
                                <a href="/details_ids/{{ item.id }}" name="{{ item.id }}">
                                    <div class="portfolio-item-desc">{{ item.Pauthor }}</div>
                                </a>
                            </div>
                        </figcaption>

                    </figure>
                </li>
                {% endfor %}
            </ul>
        </div>
        <div class="container">
            <nav class="mt-5 d-flex justify-content-center" aria-label="Page navigation">
                <ul class="pagination">
                    {% for item in page %}
                    <li class="page-item">
                        <a class="page-link" href="/work/?page={{item.page_first}}&pageSize=2" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                            <span class="sr-only">Previous</span>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="/work/?page={{item.page_previous}}&pageSize=2">
                            <span aria-hidden="true">&#139;</span>
                            <span class="sr-only">上</span>
                        </a>
                    </li>
                    <li class="page-item active">
                        <a class="page-link">{{ item.page }}</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="/work/?page={{item.page_next}}&pageSize=2">

                            <span aria-hidden="true">&#155;</span>
                            <span class="sr-only">下</span>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="/work/?page={{item.page_all}}&pageSize=2" aria-label="Next">
                            <span aria-hidden="true">»</span>
                            <span class="sr-only">Next</span>
                        </a>
                    </li>
                    {% endfor %}
                </ul>

            </nav>

        </div>

    </section>

    <!-- START: TESTIMONY -->
    <section class="section section-dark section-testimony" id="testimony">
        <div class="container">
            <div class="section-head text-center">
                <span>简  介</span>
                <h2>专 业 技 能</h2>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="swiper-container swiper-testimony wow fadeInUp" data-wow-duration="1.5s">
                        <div class="swiper-wrapper">
                            {% for item in objss%}
                            <div class="swiper-slide single-testimonials ">
                                <div class="single-testimonials-in mx-auto text-center">
                                    <div class="single-testimonials-head p-5">
                                        <p>{{item.Professional_Introduction}}</p>
                                    </div>
                                    <div class="single-testimonials-foot mx-auto mt-4">
                                        <img src="../static/images/1.jpg" alt="" class="mx-auto b-box">
                                        <h4 class="mt-3 font-weight-bold">{{University}}</h4>
                                        <span class="mt-1 d-block">{{Major}}</span>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>

                    <div class="testimony-nav">
                        <a href="#" class="swiper-button-next"></a>
                        <a href="#" class="swiper-button-prev"></a>
                    </div>

                </div>
            </div>
        </div>
    </section>

</div>


<script src="../static/js/vendor.js"></script>
<script src="../static/js/map.js"></script>
<script src="https://ditu.google.cn/maps/api/js?key=AIzaSyD79MY72taVRlZVX2DU6L5PXOh3ezUUKMc&amp;callback=initMap"
        async="" defer=""></script>
<script src="../static/js/imagesloaded.pkgd.js"></script>
<script src="../static/js/jquery.shuffle.min.js"></script>
<script src="../static/js/custom-shuffle-init.js"></script>
<script src="../static/js/custom.js"></script>
</body>


</html>
